class Modal extends HTMLElement {
    typeName = 'show';
    okText = 'Ok';
    cancelText = 'Cancel';

    get visible() {
        return this.hasAttribute("visible");
    }

    set visible(value) {
        if (value) {
            this.setAttribute("visible", "");
        } else {
            this.removeAttribute("visible");
        }
    }

    get title() {
        return this.getAttribute("title");
    }

    set title(value) {
        this.setAttribute("title", value);
    }

    show(options, callback) {
        this.setAttribute("title", options.title || '提示');
        this.setAttribute("visible", "visible"); //data-type

        this.innerHTML = options.content;
        this.callback = callback;
        this.shadowRoot.querySelector(".wrapper").setAttribute('data-type', options.type || 'show');
        this.shadowRoot.querySelector(".cancel").textContent = options.cancelText;
        this.shadowRoot.querySelector(".ok").textContent = options.okText;
        console.log(options.type);
    }

    alert(text, callback) {
        this.show({
            type: 'dialog',
            title: '提示',
            content: text,
            okText: '确定',
            cancelText: false
        }, callback);
    }

    confirm(title, text, callback) {
        this.show({
            type: 'confirm',
            title: title || '提示',
            content: text,
            okText: '确定',
            cancelText: '取消'
        }, callback);
    }

    constructor() {
        super();
    }

    connectedCallback() {
        this._render();
        this._attachEventHandlers();
    }
    static get observedAttributes() {
        return ["visible", "title"];
    }
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === "title" && this.shadowRoot) {
            this.shadowRoot.querySelector(".title").textContent = newValue;
        }
        if (name === "visible" && this.shadowRoot) {
            if (newValue === null) {
                this.shadowRoot.querySelector(".wrapper").classList.remove("visible");
                this.dispatchEvent(new CustomEvent("close"));
            } else {
                this.shadowRoot.querySelector(".wrapper").classList.add("visible");
                this.dispatchEvent(new CustomEvent("open"));
            }
        }
    }

    _render() {
        const wrapperClass = this.visible ? "wrapper visible" : "wrapper";
        const container = document.createElement("div");
        container.innerHTML = `
          <style>
            .wrapper {
              position: fixed;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0,0,0,0.15);
              opacity: 0;
              visibility: hidden;
              transform: scale(1.1);
              transition: visibility 0s linear .25s,opacity .25s 0s,transform .25s;
              z-index: 99999;
            }
            
            .visible {
              opacity: 1;
              visibility: visible;
              transform: scale(1);
              transition: visibility 0s linear 0s,opacity .25s 0s,transform .25s;
            }
            .modal {
              font-family: Helvetica;
              font-size: 14px;
              padding: 10px 10px 5px 10px;
              background-color: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              border-radius: 2px;
              min-width: 300px;
              box-shadow:0 0 0 5px #00000017;
            }
            .title {
              font-size: 18px;
            }
            .button-container {
              text-align: right;
            }
            button {
              min-width: 80px;
              background-color: #848e97;
              border-color: #848e97;
              border-style: solid;
              border-radius: 2px;
              padding: 3px;
              color:white;
              cursor: pointer;
            }
            button:hover {
              background-color: #6c757d;
              border-color: #6c757d;
            }
            .wrapper[data-type="dialog"] .cancel{
              display: none;
            }
            .wrapper[data-type="dialog"] .content,.wrapper[data-type="confirm"] .content{
              padding: 2em;
              text-align: center;
            }
          </style>
          <div class='${wrapperClass}' data-type="${this.typeName}">
            <div class='modal'>
              <span class='title'>${this.title}</span>
              <div class='content'>
                <slot></slot>
              </div>
              <div class='button-container'>
                <button class='cancel'>${this.cancelText || 'Cancel'}</button>
                <button class='ok'>${this.okText || 'Ok'}</button>
              </div>
            </div>
          </div>`;

        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.appendChild(container);
    }

    _attachEventHandlers() {
        const cancelButton = this.shadowRoot.querySelector(".cancel");
        cancelButton.addEventListener("click", (e) => {
            this.dispatchEvent(new CustomEvent("cancel"));
            this.removeAttribute("visible");
        });
        const okButton = this.shadowRoot.querySelector(".ok");
        okButton.addEventListener("click", (e) => {
            if (this.callback) {
                if (this.callback(e) === false) {
                    return false;
                }
            }

            this.dispatchEvent(new CustomEvent("ok"));
            this.removeAttribute("visible");
        });
    }
}
window.customElements.define("x-modal", Modal);